<template>
	<div class="message" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="消息中心"></back-header>
		<div class="message-warp">
			<app-loading v-if="!msgList"></app-loading>
			<div v-else-if="msgList.length == 0" style="text-align: center;padding:100px 0;font-size:16px;color:#555;">暂无消息</div>
			<div v-else class="msg-item flex" v-for="item in msgList">
				<img class="user-head inline-block" src="../assets/images/systerm.jpg">
				<div class="inline-block msg-box">
					<span class="block name text-theme text-beyond">梦想抓娃娃通知</span><span class="block content">{{item.content}}</span><span class="time text-color93">{{item.create_at}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	import appLoading from '../components/loading'
	import backHeader from '../components/backHeader'
	export default{
		name:"appMessage",
		components:{backHeader,appLoading},
		data(){
			return {
				msgList:"",
			}
		},	
		mounted(){
			this.getAllmsg();
		},
		methods:{
			getAllmsg(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/Message/getAll`,{token:this.$store.state.userInfo.token,page:1}).then((response) => {
		              console.log(response)
		              this.msgList = response.data.list;
		  		 })
			}
		}
	}
</script>

<style lang="less" scoped>
	.message-warp {
	    background: #fff
	}

	.message-warp .msg-item {
	    border-radius: 5px;
	    width: 95%;
	    margin: 10px auto;
	    padding: 5px 10px;
	    border-bottom: 1px solid #eee;
	}

	.message-warp .user-head {
	    width: 55px;
	    height: 55px;
	    margin-right: 10px;
	    border-radius: 100%;
	    border: 1px solid #f3f3f3
	}

	.message-warp .msg-item .msg-box {
	    width: calc(100% - 70px)
	}
	.message-warp .msg-item .msg-box span {
	    line-height: 25px;
	    font-size: 15px;
	    color: #888;
	    display: block;
	    &.name{
	    	font-size:16px;
	    	color:#333;
	    }
	    &.content{
	    	font-size:14px;
	    }
	    &.time{
	    	font-size:12px;
	    }
	}

	

</style>